<template>
  <div>
    <div ref="chart" class="chart"></div>
    <div class="eachrts_text">
      <div class="val">{{ value }}</div>
      <div
        class="val_label"
        :class="
          value&&value >= 685
            ? 'val_label1'
            : value&&value >= 665 && value < 685
            ? 'val_label2'
            : value&&value >= 655 && value < 665
            ? 'val_label3'
            : value&&value >= 645 && value < 655
            ? 'val_label4'
            : value&&value >= 640 && value < 645
            ? 'val_label5'
            : value&&value >= 625 && value < 640
            ? 'val_label6'
            : value&&value >= 615 && value < 625
            ? 'val_label7'
            : value&&value >= 595 && value < 615
            ? 'val_label8'
            : value&&value >= 565 && value < 595
            ? 'val_label9'
            : value&&value >= 535 && value < 565
            ? 'val_label10'
            : value&&value >= 510 && value <= 535
            ? 'val_label11'
            : value&&value < 530
            ? 'val_label12'
            : 'val_labelNull'
        "
      >
        {{gradLeve}}
      </div>
      <div class="val_name">公司最新信用评分</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    value:Number
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
   
      echartsColor: "",
      gradLeve:'',
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.getEchartData();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getEchartData() {
      console.log(this.value,'this.valuethis.value')
      let percentage=''
      if (this.value&&this.value >= 685) {
        this.echartsColor = "#239D2C";
        percentage=95
        this.gradLeve='A1'
      } else if (this.value&&this.value >= 665 && this.value < 685) {
        this.echartsColor = "#4CB369";
        percentage=85
        this.gradLeve='A2'
      } else if (this.value&&this.value >= 655 && this.value < 665) {
        this.echartsColor = "#39b1ad";
        percentage=75
        this.gradLeve='A3'
      } else if (this.value&&this.value >= 645 && this.value < 655) {
        this.echartsColor = "#20acc5";
        percentage=65
        this.gradLeve='B1'
      } else if (this.value&&this.value >= 640 && this.value < 645) {
        this.echartsColor = "#36a2e7";
        percentage=55
        this.gradLeve='B2'
      } else if (this.value&&this.value >= 625 && this.value < 640) {
        this.echartsColor = "#3888d9";
        percentage=45
        this.gradLeve='B3'
      } else if (this.value&&this.value >= 615 && this.value < 625) {
        this.echartsColor = "#eba612";
        percentage=35
        this.gradLeve='C1'
      } else if (this.value&&this.value >= 595 && this.value < 615) {
        this.echartsColor = "#f68f29";
        percentage=30
        this.gradLeve='C2'
      } else if (this.value&&this.value >= 565 && this.value < 595) {
        this.echartsColor = "#f26e00";
        percentage=25
        this.gradLeve='C3'
      } else if (this.value&&this.value >= 535 && this.value < 565) {
        this.echartsColor = "#f6622e";
        percentage=20
        this.gradLeve='D1'
      } else if (this.value&&this.value >= 510 && this.value < 535) {
        this.echartsColor = "#ee5a40";
        percentage=15
        this.gradLeve='D2'
      }else if(this.value&&this.value <510){
        this.echartsColor = "#d32d18";
        percentage=5
        this.gradLeve='D3'
      }else{
          this.echartsColor = "#F1F6F9";
        percentage=0
        this.gradLeve='空'
      }
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        var val = percentage;
        var value = val / 100;
        var startAngle = 180;
        var endAngle = 0;
        var splitCount = 15; // 刻度数量
        var fontSize = 30;
        var pointerAngle = (startAngle - endAngle) * (1 - value) + endAngle;

        //  <img src="./assets/imgs/index/ybp.png" id="bg_img" style="display:none;"/>
        // var img=''
        const option = {
          tooltip: {
            show: true, // 是否显示提示框，默认为true
          },

          series: [
            {
              // 值外
              type: "gauge",
              radius: "110%",
              startAngle: pointerAngle,
              endAngle: endAngle,
              splitNumber: 1,
              axisLine: {
                show: false,
                lineStyle: {
                  width: 3,
                  opacity: 0,
                },
              },
              title: { show: false },
              detail: {
                show:false,
                color: "#343d3c",
                fontSize: 20,
                offsetCenter: [0, 0],
                formatter: ``,
              },
              splitLine: { show: false },
              axisTick: {
                length: 8,
                splitNumber: Math.ceil((1 - value) * splitCount),
                lineStyle: {
                  color: "#dbdbdb",
                  width: 4,
                },
              },
              axisLabel: { show: false },
              pointer: { show: false },
              itemStyle: {},
              markPoint: {
                animation: true,
                silent: false,
                data: [
                  {
                    symbolSize: 280,
                    itemStyle: {
                      borderWidth: 3,
                    },
                  },
                  {
                    symbol: "circle",
                    symbolSize: 200,
                  },
                ],
              },
              data: [
                {
                  value: value,
                  name: "test gauge",
                },
              ],
            },
            {
              // 值内
              type: "gauge",
              radius: "110%",
              startAngle: startAngle,
              endAngle: pointerAngle,
              splitNumber: 1,
              axisLine: {
                show: false,
                lineStyle: {
                  width: 3,
                  opacity: 0,
                },
              },
              tooltip: {
                show: true,
              },
              title: { show: false },
              detail: { show: false },
              splitLine: { show: false },
              axisTick: {
                length: 8,
                splitNumber: Math.ceil(value * splitCount),
                lineStyle: {
                  // color: {
                  // //   image: document.getElementById('bg_img'),
                  // //   repeat: 'no-repeat'
                  //   image: img,
                  // },
                  color: this.echartsColor,
                  width: 4,
                },
              },
              axisLabel: { show: false },
              pointer: { show: false },
              itemStyle: {},
              data: [
                {
                  value: value,
                  name: "test gauge",
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.chart {
  width: 100%;
  height: 190px;
  margin: auto;
  // background-color: aqua;
  margin-top: 0px;
  padding-top: 20px;
}
.eachrts_text {
  margin-top: -130px;
  text-align: center;
}
.val {
  font-size: 30px;
  font-weight: bold;
}
.val_label {
  color: white;
  width: 50px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  margin: auto;
  border-radius: 3px;
  margin-top: 5px;
}
.val_label1 {
  background-color: #239D2C;
}
.val_label2 {
  background-color: #4CB369;
}
.val_label3 {
  background-color: #39b1ad;
}
.val_label4 {
  background-color: #20acc5;
}
.val_label5 {
  background-color: #36a2e7;
}
.val_label6 {
  background-color: #3888d9;
}
.val_label7 {
  background-color: #EBA612;
}
.val_label8 {
  background-color: #f68f29;
}
.val_label9 {
  background-color: #f26e00;
}
.val_label9 {
  background-color: #f6622e;
}
.val_label11 {
  background-color: #ee5a40;
}
.val_label12 {
  background-color: #d32d18;
}
.val_labelNull{
  background-color: #DBDBDB;
}
.val_name {
  margin-top: 8px;
  font-family: PuHuiTi65;
  font-size: 14px;
}
</style>
